<template>
	<div style="padding-left: 1.25rem;padding-right: 1.25rem;padding-top: 70px;">
		<el-row :gutter="20">
			<el-col :span="6"  style="height: 750px;">

					<el-input @focus="getFoodListByShortCode" placeholder="菜品助词码(大写)" prefix-icon="el-icon-search" v-model="shortCode"></el-input>

				<br />
				<el-card v-if="EnglishKeyBordVisle">
					<EnglishKeyBord @getLetter="getLett"> </EnglishKeyBord>
				</el-card>
				 <br>
				<el-card shadow="never">
					<el-form :model="dataForm" label-width="80px">
					<el-form-item label="联系人" prop="brandNo">
					  <el-input v-model="dataForm.linkMan" placeholder="联系人"></el-input>
					</el-form-item>
					<el-form-item label="电话" prop="brandName">
					  <el-input @input="inputCheck" v-model="dataForm.linkTel" placeholder="电话"></el-input>
					</el-form-item>
					<el-form-item label="地址" prop="brandName">
					  <el-input v-model="dataForm.address" placeholder="地址"></el-input>
					</el-form-item>
					<el-form-item label="配送人" prop="brandName">
					  <el-select v-model="dataForm.staffId" placeholder="请选择配送人">
					      <el-option
					        v-for="item in staffList"
					        :key="item.staffId"
					        :label="item.staffName"
					        :value="item.staffId">
					      </el-option>
					    </el-select>
					</el-form-item>
					</el-form>
				</el-card><br>
				<el-card shadow="never" style="">
					<el-table :data="selectFoodList" style="width: 100%;cursor: pointer;" height="220px" @row-click="superRequirement" highlight-current-row="true">
						<el-table-column prop="foodName" label="品名">
							<template slot-scope="scope">
								<div>
									<span v-show="scope.row.giveFoodStatus === 1" style="color: red;">
										[赠
										<span>{{ scope.row.giveNum }}</span>
										]
									</span>
									{{ scope.row.foodName }}
								</div>
								<div style="color: forestgreen;font-size: 0.5rem;">{{ scope.row.requirementName }}</div>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="数量">
							<template slot-scope="scope">
								<i class="el-icon-remove-outline cursor" @click="removeFood(scope.row)"></i>
								&nbsp;&nbsp;{{ scope.row.foodNum }}&nbsp;&nbsp;
								<i class="el-icon-circle-plus-outline cursor" @click="addFood(scope.row)"></i>
							</template>
						</el-table-column>
						<el-table-column prop="price" label="金额">
							<template slot-scope="scope">
								<div style="color: red;">￥{{ Number(scope.row.total) }}元</div>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
				<br />
        <el-card shadow="never">
          <el-row :gutter="20">
            <el-col :span="12">
              <a style="cursor: pointer;text-decoration: none;" @click="jiezhang">
                <div class="buttonCss" style="background-color: #F08080	">
                  结账:￥{{ totalMoney }}元/{{ number }}份
                </div>
              </a>
            </el-col>
            <el-col :span="12">
              <a style="cursor: pointer;text-decoration: none;" @click="keepOrder">
                <div class="buttonCss" style="background-color: #6ce26c">
                  下单
                </div>
              </a>
            </el-col>
          </el-row>
          <br />
          <el-row :gutter="20">
            <el-col :span="12">
              <a style="cursor: pointer;text-decoration: none;" @click="clearSelectFood">
                <div class="buttonCss" style="background-color:#DCB5FF ">
                  清空
                </div>
              </a>
            </el-col>
          </el-row>
          <br />
        </el-card>
			</el-col>
			<el-col :span="2">
				<el-card class="cursor" shadow="never" style="background-color:skyblue">选项</el-card>
				<br />
				<a @click="requirement"><el-card class="cursor" shadow="never" :style="requireStyle">要求</el-card></a>
				<br />
				<a @click="giveFood"><el-card class="cursor" shadow="never" :style="requireStyle">赠菜</el-card></a>
				<br />
				<a @click="foodNumber"><el-card class="cursor" shadow="never">食品份数</el-card></a>
				<br />
				<a @click="fastFoodNumber"><el-card class="cursor" shadow="never">外卖份数</el-card></a>
				<br />
				<a style="cursor: pointer;text-decoration: none;" @click="deleteFood"><el-card class="cursor" shadow="never">删除</el-card></a>
				<br>

				<a @click="takeoutList"><el-card class="cursor" shadow="never">外卖列表</el-card></a>
				<br />
			</el-col>
			<el-col :span="16" style="height: 46.75rem;">
				<el-tabs type="card" v-model="activeName" @tab-click="getFoodList">
					<el-tab-pane label="全部" name="0">
						<el-row :gutter="12">
							<el-col :span="6" v-for="item in foodList" :key="item.id">
								<a style="cursor: pointer;text-decoration: none;" @click="selelctFood(item)">
									<div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
										<el-row :gutter="3">
											<el-col :span="14">
												<img v-show="item.foodImg !==''"  style="width: 100%;height: 98px;" :src="item.foodImg" />
												<img v-show="item.foodImg ===''"  style="width: 100%;height: 98px" src="../../../assets/img/no-img1.png" />
											</el-col>
											<el-col :span="10">
												<div style="padding-top: 1.25rem;">
													<div class="cursor" style="color: #000000;">{{ item.foodName }}</div>
													<br>
													<div class="cursor" style="color: red;">￥{{ item.price }}元</div>
												</div>
											</el-col>
										</el-row>
									</div>
								</a>
								<br />
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-tab-pane v-for="item in foodTypeList" :key="item.id" :label="item.classificationName" :name="item.id">
						<el-row :gutter="12">
							<el-col :span="6" v-for="items in foodList" :key="item.id">
								<a style="cursor: pointer;text-decoration: none;" @click="selelctFood(items)">
									<div style="height: 100px;border: 0.0125rem solid lightgray;border-radius: 0.25rem;">
										<el-row :gutter="3">
											<el-col :span="14">
												<img v-show="items.foodImg !==''"  style="width: 100%;height: 98px;" :src="items.foodImg" />
												<img v-show="items.foodImg ===''"  style="width: 100%;height: 98px" src="../../../assets/img/no-img1.png" />
											</el-col>
											<el-col :span="10">
												<div style="padding-top: 1.25rem;">
													<div class="cursor" style="color: #000000;">{{ items.foodName }}</div>
													<br>
													<div class="cursor" style="color: red;">￥{{ items.price }}元</div>
												</div>
											</el-col>
										</el-row>
									</div>
								</a>
								<br />
							</el-col>
						</el-row>
					</el-tab-pane>
					<el-pagination
					style="text-align: center;"
						background
						@size-change="sizeChangeHandle"
						@current-change="currentChangeHandle"
						:current-page="pageIndex"
						:page-sizes="32"
						:page-size="pageSize"
						:total="totalPage"
						layout="prev, next"
					></el-pagination>
				</el-tabs>
			</el-col>
		</el-row>

		<!-- 要求 -->
		<el-dialog title="要求" :visible.sync="requirementVisible" :close-on-click-modal="false" width="40%" center>
			<el-checkbox-group v-model="requirementIdList">
				<el-checkbox border size="medium" v-for="f in requirementList" :key="f.requirementId" :label="f.requirementId">{{ f.requirementName }}</el-checkbox>
			</el-checkbox-group>
			<br />
			<el-input v-model="customRequirement" placeholder="自定义要求"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取消</el-button>
				<el-button type="primary" @click="getRequirements()">确定</el-button>
			</span>
		</el-dialog>

    <!-- 赠菜 -->
    <el-dialog title="赠菜" :visible.sync="giveFoodVisible" :close-on-click-modal="false" width="40%" center>
      <el-row :gutter="20">
        <el-col :span="12">
          <div>赠菜理由</div>
          <br />
          <el-row :gutter="10">
            <el-radio-group v-model="retreatFoodIdList">
              <el-col :span="12" v-for="c in giveFoodReasonList" :key="c.reasonDetailId">
                <el-radio border size="medium" :label="c.reasonDetailId">{{ c.reasonDetailName }}</el-radio>
              </el-col>
            </el-radio-group>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div style="font-size: 1.25rem;">
              赠菜数量,最多可赠:
              <span style="color: red;">[{{ foodItemInfo.foodNum }}]</span>
            </div>
            <br />
            <KeyBN ref="keyBoardRef" @getEatNum="getRetreatNum"></KeyBN>
          </el-card>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
				<el-button @click="giveFoodVisible = false">取消</el-button>
				<el-button type="primary" @click="submitGiveFood()">确定</el-button>
			</span>
    </el-dialog>

		<!-- 支付 -->
		<PayComponent @refreshDataList="clearData" v-if="PayComponentVisible" ref="PayComponentRef"></PayComponent>

		<FastfoodList v-if="FastfoodListVisible" ref="FastfoodListRef"></FastfoodList>

		<!-- 份数 -->
		<KeyB ref="keyBoardRef" @getEatNum="eatNum"></KeyB>

		<!-- 菜品数量 -->
		<KeyB ref="keyBoardFoodNumRef" @getEatNum="FoodNum"></KeyB>

		<!-- 会员列表弹出层 -->
		<el-dialog center title="会员列表" :visible.sync="memberListVisile" width="70%" append-to-body>
			<MemberList @getSelectMemberData="memberInfo"></MemberList>
		</el-dialog>

		<!-- 挂账单位列表弹出层 -->
		<el-dialog center title="挂账单位列表" :visible.sync="AccountUnitListVisible" width="70%" append-to-body>
			<AccountUnitList @getSelectAccountUnitData="accountUnitInfo"></AccountUnitList>
		</el-dialog>

		<TakeoutList v-if="TakeoutListVisible" ref="TakeoutListRef"></TakeoutList>

		<!-- 支付打印 -->
		<WMPayPrint @DataIsNull="toPan" v-show="false" ref="WMPayPrintRef"></WMPayPrint>
	</div>
</template>

<script>
	import PayComponent from './Pay.vue'
	import TakeoutList from './TakeoutList.vue'
	import WMPayPrint from '../../modules/common/printTemplate/WaiMai/WMPayPrint.vue';
	import MemberList from '../../modules/store/member/recharge/memberList.vue';
	import AccountUnitList from '../component/AccountUnitList.vue';
	import EnglishKeyBord from '../component/EnglishKeyBord.vue'
	import KeyB from '../component/KeyBoard.vue'
  import KeyBN from '../component/KeyBoardNum.vue';
export default {
	components:{
		PayComponent,
		TakeoutList,
		WMPayPrint,
		MemberList,
		AccountUnitList,
		EnglishKeyBord,
		KeyB,
    KeyBN
	},

	data() {
		return {
      retreatFoodIdList:[],
			EnglishKeyBordVisle:false,
			memberListVisile:false,
			AccountUnitListVisible:false,
			FastfoodListVisible:false,
			PayComponentVisible:false,
			foodTypeList: [],
			foodList: [],
			activeName: 0,
			selectFoodList: [],
			foodIdList: [],
			totalMoney: 0,
			num: 0,
			index: 0,
			idArray: [],
			openDeskInfo: '',
			requirementVisible: false,
			requirementList: [],
			requirementIdList: [],
			requireStyle: '',
			customRequirement: '',
			requireArray: [],
			selectFoodId: 0,
			requirementStr: '',
			giveFoodVisible: false,
			fastFoodNumberVisible:false,
			giveFoodReasonList: [],
			giveFoodReasonId: '',
			brandList:[],
			brandName:'',
			orderInfo:{},
			number:1,
			dataForm:{
				linkMan:null,
				linkTel:null,
				address:null,
				staffId:null
			},
			TakeoutListVisible:false,
			memberInfoVisle:false,
			staffList:[],
			unitInfo:{},
			memberInfos:{},
			discount:1,
			memberName:'',
			memberTypeName:'',
			memberId:null,
			accountId:null,
			shortCode:'',
			foodItemInfo:'',
			pageIndex: 1,
			pageSize: 24,
			totalPage: 0,
			typeId:0,
      retreatFoodNum:0,
		};
	},
	created() {
		// this.init();
		this.getFoodTypeList();
		this.getDataList();
		this.getStaffList();
	},

	methods: {
    getRetreatNum(num) {
      this.retreatFoodNum = num;
    },

		inputCheck(){
			if(isNaN(this.dataForm.linkTel)){
				this.dataForm.linkTel = ''
			}
		},

    getLett(lett) {
      if (lett === 'close') {
        this.EnglishKeyBordVisle = false;
        this.shortCode = '';
        this.getDataList()
      } else {
        if (lett === ''){
          this.shortCode = ''
          this.getDataList()
        }else {
          this.shortCode = lett;
          this.$http({
            url: this.$http.adornUrl('/store/tstorefood/getFoodListByShortCode'),
            method: 'get',
            params: this.$http.adornParams({
              shortCode: this.shortCode
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              if (data.page !== null) {
                this.foodList = data.page;
              } else {
                this.foodList = [];
              }
            } else {
              this.foodList = [];
            }
          });
        }

      }
    },

		//记账单位
		accountUnit(){
			if(this.selectFoodList.length === 0){
				this.$message({
					type: 'warning',
					message: '请先选择菜品'
				});
			}
			else if(this.memberId !== null){
				this.$message({
					type: 'warning',
					message: '已经选择会员，不能选择记账单位'
				});
			}
			else{
				this.AccountUnitListVisible = true
			}

		},

		//会员
		memberOp(){
			if(this.selectFoodList.length === 0){
				this.$message({
					type: 'warning',
					message: '请先选择菜品'
				});
			}
			else if(this.accountId !== null){
				this.$message({
					type: 'warning',
					message: '已经选择记账单位，不能选择会员'
				});
			}
			else{
				this.memberListVisile = true
			}

		},

		memberInfo(row) {
			this.memberInfoVisle = true
			this.memberInfos = row
			var discountMoney = (row.defaultDiscount / 10) * this.totalMoney;
			this.totalMoney = discountMoney
			this.reallyGet = Math.floor(discountMoney * 10) / 10;
			this.discount = row.defaultDiscount;
			this.memberName = row.memberName;
			this.memberTypeName = row.memberTypeName;
			this.memberListVisile = false;

			this.memberId = row.id;
			this.orderInfo.memberId = row.id;
			this.orderInfo.discount = this.discount;
			this.orderInfo.discountMoney = this.reallyGet;
			this.orderInfo.memberTypeId = row.memberTypeId;
			this.orderInfo.totalMoney = this.totalMoney;
		},

		accountUnitInfo(row){
			this.unitInfo = row;
			this.accountId = row.accountUnitId;
			this.orderInfo.accountId = row.accountUnitId;
			this.AccountUnitListVisible = false;
		},

		//下单
		save(){
			this.orderInfo.totalMoney = this.totalMoney*this.number
			this.orderInfo.foodVos = this.selectFoodList
			this.orderInfo.linkMan = this.dataForm.linkMan
			this.orderInfo.linkTel = this.dataForm.linkTel
			this.orderInfo.address = this.dataForm.address
			this.orderInfo.staffId = this.dataForm.staffId
			this.orderInfo.number = this.number
			this.orderInfo.reallyGet = 0

			this.$confirm('是否进行下单操作', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$http({
				  	url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/save`),
				  	method: 'post',
				  	data: this.$http.adornData({
				  		"takeoutInfo": this.orderInfo
				  	})
				  }).then(({ data }) => {
				  	if (data && data.code === 0) {
				  		this.$message({
				  			message: '下单成功',
				  			type: 'success',
				  			duration: 1500
				  		});
				  	}else{
				  		this.$message({
				  			message: data.msg,
				  			type: 'danger',
				  			duration: 1500
				  		});
				  	}
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '取消下单'
				  });
				});
		},

		toPan(){
			this.print()
		},

		//打印账单小票
		print(){
			this.orderInfo.eatType = '外卖';
			this.$nextTick(() => {
				this.$refs.WMPayPrintRef.init(this.orderInfo);
			});
		},

		//保存订单
		keepOrder(){
			if(this.dataForm.staffId === null || this.dataForm.linkTel === null || this.dataForm.address === null || this.dataForm.linkMan === null || this.selectFoodList.length < 1){
				this.$message({
					message: '请保证订单信息完整',
					type: 'danger',
					duration: 1500
				});
			}else{
				this.orderInfo.totalMoney = this.totalMoney*this.number
				this.orderInfo.foodVos = this.selectFoodList
				this.orderInfo.linkMan = this.dataForm.linkMan
				this.orderInfo.linkTel = this.dataForm.linkTel
				this.orderInfo.address = this.dataForm.address
				this.orderInfo.staffId = this.dataForm.staffId
				this.orderInfo.number = this.number

				this.orderInfo.paySign = 1
				this.orderInfo.reallyGet = 0
				this.PayComponentVisible = true
				this.$http({
					url: this.$http.adornUrl(`/reception/tstoretakeoutrecord/save`),
					method: 'post',
					data: this.$http.adornData({
						takeoutInfo: this.orderInfo
					})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '下单成功',
							type: 'success',
							duration: 1500
						});
						this.clearData()

						this.print()
					} else {
						this.$message({
							message: data.msg,
							type: 'danger',
							duration: 1500
						});
					}
				});
			}
		},

		takeoutList(){
			this.TakeoutListVisible = true
			this.$nextTick(() => {
				this.$refs.TakeoutListRef.getDataList();
			})
		},

		//获取员工
		getStaffList(){
			this.$http({
			  url: this.$http.adornUrl('/store/tstorestaff/list'),
			  method: 'get',
			  params: this.$http.adornParams({
			    'page': 1,
			    'limit': 1000,
          'key':''
			  })
			}).then(({data}) => {
			  if (data && data.code === 0) {
			    this.staffList = data.page.list
			  } else {
			    this.staffList = []
			  }
			})
		},

		//删除菜品
		deleteFood(){
			if (this.foodItemInfo === '') {
				this.$message({
					message: '请选择菜品',
					type: 'warning',
					duration: 1500
				});
			} else {
			var row = this.foodItemInfo;
			if (row.foodNum > 1) {
				row.foodNum--;
				row.total = Number(row.foodNum) * Number(row.price);
				this.totalMoney -= row.price;
				this.selectFoodList.push(row);
				this.selectFoodList = Array.from(new Set(this.selectFoodList));
			} else {
				var idNewArray = [];
				for (let s = 0; s < this.idArray.length; s++) {
					if (row.id !== this.idArray[s]) {
						idNewArray.push(this.idArray[s]);
					}
				}
				this.idArray = idNewArray;
				this.num--;
				this.totalMoney -= row.price;
				//TODO
				var newArr = [];
				for (let i = 0; i < this.selectFoodList.length; i++) {
					this.selectFoodList[i].index = i;
					newArr.push(this.selectFoodList[i]);
				}
				this.selectFoodList = newArr;
				this.selectFoodList.splice(row.index, 1);
			}
				this.foodItemInfo = ''
			}
		},

		//份数
		fastFoodNumber(){
			this.$nextTick(() => {
				this.$refs.keyBoardRef.init("请输入份数");
			})
		},

		//菜品数量
		foodNumber(){
			if(this.foodItemInfo === ''){
				this.$message({
					message: '请选择菜品',
					type: 'warning',
					duration: 1500
				});
			}else{
				this.$nextTick(() => {
					this.$refs.keyBoardFoodNumRef.init("请输入菜品份数");
				})
			}

		},

		FoodNum(number){
			//this.foodnumber = number
			var row = this.foodItemInfo;
			row.foodNum = number;
			this.totalMoney -= row.total;
			row.total = Number(row.foodNum) * Number(row.price);
			this.totalMoney += row.total;
			this.selectFoodList.push(row);
			this.selectFoodList = Array.from(new Set(this.selectFoodList));
		},

		eatNum(number){
			this.orderInfo.number = this.number
			this.number = number
			this.$message({
				message: '外卖份数为  【'+number+'】',
				type: 'success',
				duration: 1500
			});
			this.fastFoodNumberVisible = false
		},


		fastfoodList(){
			this.FastfoodListVisible = true
			this.$nextTick(() => {
				this.$refs.FastfoodListRef.getDataList();
			})
		},

		//结账
		jiezhang(){
			if(this.dataForm.linkTel === null || this.dataForm.address === null || this.dataForm.linkMan === null || this.selectFoodList.length < 1){
				this.$message({
					message: '请保证订单信息完整',
					type: 'danger',
					duration: 1500
				});
			}else{
				this.orderInfo.totalMoney = this.totalMoney*this.number
				this.orderInfo.foodVos = this.selectFoodList
				this.orderInfo.linkMan = this.dataForm.linkMan
				this.orderInfo.linkTel = this.dataForm.linkTel
				this.orderInfo.address = this.dataForm.address
				this.orderInfo.staffId = this.dataForm.staffId
				// this.orderInfo.accountId = this.accountId
				// this.orderInfo.memberId = this.memberId
				// this.orderInfo.memberInfos = this.memberInfos
				// this.orderInfo.unitInfo = this.unitInfo
				this.orderInfo.number = this.number
				//this.orderInfo.memberTypeName = this.memberTypeName

				this.orderInfo.sign = 2 //不格式化foodVo
				this.orderInfo.paySign = 2 //结账
				this.orderInfo.directPayFlag = false
				this.PayComponentVisible = true

				//获取会员账户详情
				if(this.memberId !== null){
					this.$http({
						url: this.$http.adornUrl(`/store/tstorememberaccountdetail/info/` + this.memberId),
						method: 'get',
						params: this.$http.adornParams()
					}).then(({ data }) => {
						if (data && data.code === 0) {
							this.orderInfo.memberAccountInfo = data.tStoreMemberAccountDetail
						}
					});
				}

				this.$nextTick(() => {
					this.$refs.PayComponentRef.init(this.orderInfo);
				})
			}

		},

		//根据助词码获取菜品
		getFoodListByShortCode(){
			this.EnglishKeyBordVisle = true
		},

		clearData(){
			this.PayComponentVisible = false
			this.brandName = ''
			this.totalMoney = 0
			this.selectFoodList = []
			this.idArray = []
			this.number = 1
			this.dataForm = {}

			this.getBrandList()
		},

    //提交赠菜
    submitGiveFood() {
      for (let i = 0; i < this.selectFoodList.length; i++) {
        if (this.selectFoodList[i].id === this.selectFoodId) {
          if (this.foodItemInfo.foodNum > 1) {
            this.totalMoney -= this.selectFoodList[i].price*this.retreatFoodNum;
            this.selectFoodList[i].total = this.selectFoodList[i].price*(this.selectFoodList[i].foodNum - this.retreatFoodNum)
          } else {
            this.totalMoney -= this.selectFoodList[i].price*this.retreatFoodNum;
            this.selectFoodList[i].total = 0
          }
          this.selectFoodList[i].giveFoodReasonId = this.giveFoodReasonId;
          this.selectFoodList[i].giveFoodStatus = 1;
          this.selectFoodList[i].giveNum = this.retreatFoodNum;
        }
      }
      this.giveFoodVisible = false;
    },

		//赠菜
		giveFood() {
			if (this.foodItemInfo === '') {
				this.$message({
					message: '请选择菜品',
					type: 'warning',
					duration: 1500
				});
			} else {
			this.$http({
				url: this.$http.adornUrl('/store/tstorereasondetail/listGiveFood'),
				method: 'get',
				params: this.$http.adornParams({})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.giveFoodReasonList = data.data;
				} else {
					this.giveFoodReasonList = [];
				}
			});
			this.giveFoodVisible = true;
			}
		},

		getRequirements() {
			var requireArr = [];
			for (let j = 0; j < this.requirementIdList.length; j++) {
				for (let i = 0; i < this.requirementList.length; i++) {
					if (this.requirementList[i].requirementId === this.requirementIdList[j]) {
						requireArr.push(this.requirementList[i].requirementName);
					}
				}
			}
			this.requireArray = requireArr;
			for (let k = 0; k < this.requireArray.length; k++) {
				this.requirementStr += this.requireArray[k] + ' ';
			}
			for (let i = 0; i < this.selectFoodList.length; i++) {
				if (this.selectFoodList[i].id === this.selectFoodId) {
					this.selectFoodList[i].requirementName = this.requirementStr + this.customRequirement;
				}
			}
			this.requirementVisible = false;
		},

		superRequirement(row, column, event) {
			this.requirementStr = '';
			this.customRequirement = '';
			this.requirementIdList = [];
			this.selectFoodId = row.id;
			this.foodItemInfo = row
			//this.requireStyle = 'background-color: #F08080;color:white';
		},

		requirement() {
			if (this.foodItemInfo === '') {
				this.$message({
					message: '请选择菜品',
					type: 'warning',
					duration: 1500
				});
			} else {
				this.requirementVisible = true;
				this.$http({
					url: this.$http.adornUrl('/store/tstorerequirement/list'),
					method: 'get',
					params: this.$http.adornParams({})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.requirementList = data.page.list;
					} else {
						this.requirementList = [];
					}
				});
			}
		},

		//下单
		xiadan() {
			if(this.selectFoodList.length < 1){
				this.$message({
					message: '请选择菜品后下单',
					type: 'success',
					duration: 1500
				});
			}else{
				this.openDeskInfo.foodVos = this.selectFoodList;
				this.openDeskInfo.totalMoney = this.totalMoney;
				this.$http({
					url: this.$http.adornUrl(`/reception/tstoreopendesk/xiadan`),
					method: 'post',
					data: this.$http.adornData({
						orderInfo: this.openDeskInfo
					})
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '下单成功',
							type: 'success',
							duration: 1500
						});
						this.$router.push({ name: 'TangShi' });
					} else {
						this.$message.error(data.msg);
					}
				});
			}
		},

		//清空
		clearSelectFood() {
			if (this.selectFoodList.length === 0) {
				this.$message({
					type: 'danger',
					message: '当前无选中菜品'
				});
			} else {
				this.$confirm('你确定要清空所选菜品吗,?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						this.selectFoodList = [];
						this.idArray = [];
						this.num = 0;
						this.index = 0;
						this.totalMoney = 0;
						this.foodIdList = [];
						this.$message({
							type: 'success',
							message: '清除成功!'
						});
					})
					.catch(() => {
						this.$message({
							type: 'info',
							message: '已取消清除'
						});
					});
			}
		},

		//添加菜品份数
		addFood(row) {
			row.foodNum++;
			row.total = Number(row.foodNum) * Number(row.price);
			this.totalMoney += row.price;
			this.selectFoodList.push(row);
			this.selectFoodList = Array.from(new Set(this.selectFoodList));
		},
		//移除菜品
		removeFood(row) {
			if (row.foodNum > 1) {
				row.foodNum--;
				row.total = Number(row.foodNum) * Number(row.price);
				this.totalMoney -= row.price;
				this.selectFoodList.push(row);
				this.selectFoodList = Array.from(new Set(this.selectFoodList));
			} else {
				var idNewArray = [];
				for (let s = 0; s < this.idArray.length; s++) {
					if (row.id !== this.idArray[s]) {
						idNewArray.push(this.idArray[s]);
					}
				}
				this.idArray = idNewArray;
				this.num--;
				this.totalMoney -= row.price;
				//TODO
				var newArr = [];
				for (let i = 0; i < this.selectFoodList.length; i++) {
					this.selectFoodList[i].index = i;
					newArr.push(this.selectFoodList[i]);
				}
				this.selectFoodList = newArr;
				this.selectFoodList.splice(row.index, 1);
			}
		},

		//选择菜品
		selelctFood(food) {
			console.log("food  "+this.idArray)
			food.foodSign = 1
			food.index = this.num;
			if (food.index === 0) {
				this.idArray.push(food.id);
				food.foodNum = 1;
				food.total = food.price;
				//数据索引
				food.index = this.num;
				this.num++;
				this.selectFoodList.push(food);
				this.selectFoodList = Array.from(new Set(this.selectFoodList));
				this.totalMoney += Number(food.price);
			} else {
				if (!this.idArray.includes(food.id)) {
					this.idArray.push(food.id);
					food.foodNum = 1;
					food.total = food.price;
					//数据索引
					food.index = this.num;
					this.num++;
					this.selectFoodList.push(food);
					this.selectFoodList = Array.from(new Set(this.selectFoodList));
					this.totalMoney += Number(food.price);
				}
			}
		},

		getFoodTypeList() {
			//获取菜品分类
			this.$http({
				url: this.$http.adornUrl('/store/tstorefoodtype/list'),
				method: 'get',
				params: this.$http.adornParams({
					page:1,
					limit:100,
          key:'',
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foodTypeList = data.page.list;
				} else {
					this.foodTypeList = [];
					this.totalPage = 0;
				}
			});
		},

		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList()
		},

		getDataList(){
			this.$http({
				url: this.$http.adornUrl('/store/tstorefood/listFoodShow'),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex,
					limit: this.pageSize,
					typeId: this.typeId,
          useRange: 3,
          key:'',
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foodList = data.page.list;
					this.totalPage = data.page.totalCount;
				} else {
					this.foodList = [];
					this.totalPage = 0;
				}
			});
		},

		getFoodList(tab, event) {
			if(this.pageIndex > 1){
				this.pageIndex = 1
			}

			var typeId = null;
			if (tab === 0) {
				typeId = 0;
			} else {
				typeId = tab.name;
				this.typeId = typeId
			}
			this.$http({
				url: this.$http.adornUrl('/store/tstorefood/listFoodShow'),
				method: 'get',
				params: this.$http.adornParams({
					page: this.pageIndex,
					limit: this.pageSize,
					typeId: typeId,
          useRange: 3,
          key:'',
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.foodList = data.page.list;
					this.totalPage = data.page.totalCount;
				} else {
					this.foodList = [];
					this.totalPage = 0;
				}
			});
		}
	}
};
</script>

<style>
.cursor {
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}
.buttonCss {
  text-align: center;
  width: 100%;
  height: 50px;
  padding-top: 18px;
  font-weight: 800;
}
</style>
